<template>
        <div class="container">
        <header><van-search
  v-model="value"
  shape="round"
  background="pink"
  placeholder="请输入搜索关键词"
/></header>
        <main>
            <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
            <BannerList :bannerList="bannerlist"></BannerList> 
            <NavList :navList="navlist"></NavList>
            <MiaoSha :miaoshalist="miaoshalist"></MiaoSha>
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <List :proList="prolist"></List>
</van-list>
</van-pull-refresh>
<van-back-top right="2vw" bottom="8vh" />
        </main>
    </div>
</template>
<script>
import BannerList from './components/BannerList.vue';
import List from './components/proList.vue';
import NavList from './components/NavList.vue';
import { getBannerList, getMenuList, getProList,getSeckillList } from '@/api/index';
import MiaoSha from './components/MiaoSha.vue';
    export default {
        components:{
            BannerList,
            List, 
            NavList,
            MiaoSha
        },
        data(){
            return{
                bannerlist:[],
                navlist:[],
                prolist:[],
                miaoshalist:[],
                loading:false,
                finished:false,
                refreshLoading: false,
                count:1,
                limitNum:12,
                miaoshacount:1,
                miaoshanum:10,
                value:'手机'
            }
        }, 
        created(){
            getBannerList().then(res=>this.bannerlist=res.data.data)
            getMenuList().then(res=>this.navlist=res.data.data)
            getProList({count:this.count,limitNum:this.limitNum}).then(res=>this.prolist=res.data.data)
            getSeckillList({count:this.miaoshacount,limitNum:this.miaoshanum}).then(res=>this.miaoshalist=res.data.data)
        },
        methods:{
            onLoad(){
                setTimeout(()=>{
                this.loading=true
                getProList({count:this.count++,limitNum:this.limitNum}).then(res=>
                {
                    this.prolist = this.prolist.concat(res.data.data)
                    this.loading=false
                    if (res.data.data.length==0) {
                    this.finished=true 
                }else{
                    this.finished=false
                }
                })
                },2000)
            },
            onRefresh(){
                setTimeout(()=>{
                    this.refreshLoading=true
                getProList({count:parseInt(Math.random()*100),limitNum:this.limitNum}).then(res=>{
                    this.prolist=res.data.data
                    this.refreshLoading=false
                })
                },2000)
            }
        }
    }
</script>

<style lang="less" scoped>
header{
    height: 52px;
}
</style>